// 创建vue实例
const { createApp } = Vue
const app = createApp({
    data(){
        return{
            heroList:[],
            //条件查询
            query:{
                key:'dingwei',
                value:0,
            },
            //用来保存输入框的内容
            keywords:'',
            //前边的按钮
            typeList: {
                zonghe: [
                    { name: '本周免费', value: 10 },
                    { name: '新手推荐', value: 11 },
                ],
                dingwei: [
                    { name: '全部', value: 0 },
                    { name: '坦克', value: 3 },
                    { name: '战士', value: 1 },
                    { name: '法师', value: 2 },
                    { name: '刺客', value: 4 },
                    { name: '射手', value: 5 },
                    { name: '辅助', value: 6 },
                ],
            },
        }
    },
    computed:{
        filterHeros(){
            //解构出来key和value
            const {key,value} = this.query
            //输入框的内容
            const keywords = this.keywords
            if(keywords){
                //这里用=赋值给res后,再对res进行map处理,会修改掉原始数据this.heroList的内容,影响其他内容的渲染,第二次再查询也查询不到了,为了避免影响原始数据,需要深拷贝
                let res = this.heroList.filter(item => item.cname.includes(keywords))
                //基于res深拷贝一份新数据,避免修改原始数据
                const res2 = _.cloneDeep(res)
                //map方法查找出来的元素是一个对象,修改对象的属性,会影响原始数据
                return res2.map(hero =>{
                    hero.cname = hero.cname.replace(keywords,`<span style="color:red">${keywords}</span>`)
                    return hero
                })
            }else{
                if(key === 'zonghe'){
                    return this.heroList.filter((item) =>item.pay_type === value)
                }else if(key === 'dingwei'){
                    if(value ===0){
                        return this.heroList
                    }else{
                        return this.heroList.filter((item)=>item.hero_type === value || item.hero_type2 === value)
                    }
                }
            }
        },
    },
    methods:{
        getHeroUrl(value){
            return  `https://pvp.qq.com/web201605/herodetail/${value}.shtml`
        },
        getHeroImg(value){
            return `https://game.gtimg.cn/images/yxzj/img201606/heroimg/${value}/${value}.jpg`
        },

        changeType(key,value){
            this.query.key = key
            this.query.value = value
            this.keywords = ''
        },
        changeKeywords(event) {
            //保存keywords
            this.keywords = event.target.value;
            this.query.key = 'dingwei'
            this.query.value = 0
        }
    },
    async mounted(){
        //实例挂载完成,数据初始化
        const res = await axios.get('http://project.x-zd.net:3001/apis/herolist')
        this.heroList = res.data.data
    }
})
app.mount('#app')